<template>
	<div>
		<el-form class="container" label-width="120px" label-position="right">
			<h3>出库</h3>
			<el-row style="margin-top:20px;">
				<el-col :span="10">
					<el-form-item label="客户名称：">
						{{headerList.clientName}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="交货时间：">
						{{headerList.deliverTime}}
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="销售员：">
						{{headerList.salesperson}}
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="收货人：">
						{{headerList.consignee}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="收货电话：">
						{{headerList.phone}}
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="收货地址：">
						{{headerList.address}}
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div class="container" style="margin-top:20px;">
			<h3>订单明细</h3>
			<el-table
			    :data="tableData"
			    border
			    style="margin-top:20px;"
			    ref="multipleTable"
			    header-cell-class-name="table-header"
			>
			    <el-table-column prop="name" sortable label="产品名称"></el-table-column>
			    <el-table-column prop="specs" sortable label="规格">
					<template slot-scope="scope">
						{{scope.row.specs}}{{scope.row.units}}
					</template>
				</el-table-column>
				<el-table-column prop="batch" sortable label="批号"></el-table-column>
				<el-table-column prop="number" sortable label="数量"></el-table-column>
				<el-table-column prop="unit" sortable label="单位"></el-table-column>
				<el-table-column prop="warehouseName" sortable label="所在仓位"></el-table-column>
				<el-table-column prop="source" sortable label="追溯码">
					<template slot-scope="scope">
						<el-input @focus="getcode(scope.$index, scope.row)" v-model="scope.row.codes"></el-input>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-form label-position="right" label-width="120px" class="container" style="margin-top:20px;">
			<h3>物流信息</h3>
			<el-row>
				<el-form-item label="运输方式：">
					<el-radio-group v-model="ruleForm.type" @change="handletab">
						<el-radio label="物流车">物流车</el-radio>
						<el-radio label="物流/快递">物流/快递</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-col v-if="ruleForm.type == '物流车'">
					<el-form-item label="司机姓名：">
						<el-input placeholder="请输入内容" style="width:300px;" v-model="ruleForm.driverName"></el-input>
					</el-form-item>
					<el-form-item label="车牌号：">
						<el-input placeholder="请输入内容" style="width:300px;" v-model="ruleForm.carNum"></el-input>
					</el-form-item>
					<el-form-item label="联系电话：">
						<el-input placeholder="请输入内容" style="width:300px;" v-model="ruleForm.driverPhone"></el-input>
					</el-form-item>
				</el-col>
				<el-col v-if="ruleForm.type == '物流/快递'">
					<el-form-item label="物流/快递名称：">
						<el-input placeholder="请输入内容" style="width:300px;" v-model="ruleForm.logisticsCompany"></el-input>
					</el-form-item>
					<el-form-item label="物流/快递单号：">
						<el-input placeholder="请输入内容" style="width:300px;" v-model="ruleForm.logisticsNum"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-dialog title="请输入追溯码" customClass="customWidth" :visible.sync="dialogFormVisible">
				<el-form :model="form" label-width="120px">
					<el-form-item label="请输入追溯码">
						<el-input placeholder="请输入内容"   v-model="num" style="width:200px">
						</el-input>
						<el-button @click="get">确认</el-button>
						
					</el-form-item>
					
					<el-form-item label="">
						<textarea name="" id="" cols="30" rows="10" disabled v-model="numList"></textarea>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="close">取 消</el-button>
					<el-button type="primary" @click="save">确 定</el-button>
				</div>
			</el-dialog>
			<el-form-item class="footerFixed" label-width="0px">
			    <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
			    <el-button @click="backPage">返回</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import { order_findById,storage_out,storage_manage_out_checkcode } from "@/request/api"
	export default{
		data(){
			return{
				dialogFormVisible:false,
				form:{},
				id:'',
				headerList:[],
				ruleForm:{
					type:"物流车"
				},
				tableData:[],
				num:'',
				index:'',
				numList:''
			}
		},
		mounted() {
			this.id = this.$route.query.id
			this.init()
		},
		methods:{
			//弹出层确认追溯码
			get(){
				let data = this.tableData[this.index].relateId + "/" + this.num
				storage_manage_out_checkcode(data).then((res)=>{
					// console.log(res.data)
					if(res.data == false){
						this.$notify({
							title: '提示',
							message: '请输入正确的追溯码',
							type: 'info'
						});
					}else{
						
						// this.$set(this.tableData[this.index].codes,this.index,this.num)
						// console.log(this.index)
						// console.log(this.tableData[this.index].codes)
						this.numList +=  this.num + "," 
						this.$set(this.tableData[this.index],"codes",this.numList)
						this.num = ""
					}
					
				})
			},
			//关闭弹出层(取消)
			close(){
				this.numList = ""
				this.dialogFormVisible = false
			},
			//关闭弹出层(确认)
			save(){
				// this.numList = ""
				this.dialogFormVisible = false

			},
			//插槽打开弹出层
			getcode(index,row){
				console.log(row)
				this.dialogFormVisible = true
				this.index = index
			},
			backPage(){
				this.$router.go(-1)
			},
			handletab(ele){
				if(ele == "物流车"){
					this.ruleForm.logistics = ""
					this.ruleForm.logisticsCode = ""
				}
				if(ele == "物流/快递"){
					this.ruleForm.driver = ""
					this.ruleForm.carCode = ""
					this.ruleForm.phone = ""
				}
			},
			init(){
				order_findById(this.id).then((res)=>{
					this.headerList = res.data.order
					this.tableData = res.data.details
				})
			},
			submitrule(){
				var detailCodes = []
				this.ruleForm.orderDetaileds = this.headerList.orderDetailedList
				
				for(var i=0;i<this.tableData.length;i++){
					
					this.tableData[i].codes = this.tableData[i].codes.substr(0,this.tableData[i].codes.length-1)

					if(this.tableData[i].codes){

						var list = this.tableData[i].codes.split(",")

						// console.log(list)
						var codes = []
						for(var s =  0; s<list.length;s++){
							codes.push(list[s])
						}
						detailCodes.push({"detailId":this.tableData[i].id,"codes":codes})
					}else{
						alert(`请填写第${i+1}条追溯码`)
						return false
					}
				}
				console.log(detailCodes)
				let data = {
					logistics:this.ruleForm,
					detailCodes: detailCodes
				}
				storage_out(data).then((res)=>{
					this.$notify({
					    title: '提示',
					    message: '保存成功',
					    type: 'success'
					});
					this.$router.go(-1)
				})
			}
		}
	}
</script>

<style scoped>
	
</style>
